<template>
	<view class="AllocationRecord-conatiner">
		<!-- 搜索框 -->
		<searchBar v-model="searchValue" @search="search" placeholder="搜索服务商名称或手机号" :needShadow="false" />

		<!-- 下拨记录列表 -->
		<view class="AllocationRecord-list">
			<z-paging ref="paging" :fixed="false" v-model="AllocationRecordList" @query="queryList">
				<template #loadingMoreNoMore>
					<div style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</div>
				</template>

				<template #empty></template>

				<view @click="goAllocateDetail(item)" v-for="(item, index) in AllocationRecordList" :key="index" class="card">
					<view class="card-title">
						<view class="title-label">{{ item.deviceType == '0' ? '柜机' : '充电宝' }}</view>
						<view class="title-value">
							<image src="@/static/go-icon.png" class="goIcon" />
						</view>
					</view>
					<view class="card-info">
						<view class="info-label">服务商</view>
						<view class="info-value">{{ item.inspectorName }}</view>
					</view>
					<view class="card-info">
						<view class="info-label">手机号</view>
						<view class="info-value">{{ item.tel }}</view>
					</view>
					<view class="card-info">
						<view class="info-label">{{ item.deviceType == '0' ? '柜机数量' : '充电宝数量' }}</view>
						<view class="info-value">{{ item.num }}</view>
					</view>
					<view class="card-info">
						<view class="info-label">下拨时间</view>
						<view class="info-value">{{ item.allocateTime }}</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getAllocationRecordList } from '@/api/deviceAllocation.js';
import searchBar from '@/subPages/components/cds-searchBar/index.vue';

// 搜索框内容
const searchValue = ref('');
const search = (e) => {
	searchValue.value = e;
	paging.value.reload();
};

// 获取下拨记录列表
const getAllocationRecordListFun = async (pageNum = 1, pageSize = 10) => {
	let res = await getAllocationRecordList({
		param: searchValue.value,
		pageNum,
		pageSize,
	})
	
	if (res.code == 200) {
		paging.value.complete(res.rows);
	}
};

// 查询下拨记录列表
const AllocationRecordList = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	getAllocationRecordListFun(pageNo, pageSize)
	// paging.value.complete([1, 2, 3, 4]);
};

// 跳转到下拨记录详情页面
const goAllocateDetail = (item) => {
	uni.navigateTo({
		url: `/subPages/allocateDetail/index?uuid=${item.uuid}&num=${item.num}&allocateType=${item.deviceType == '0' ? 'device' : 'powerBank'}`,
	});
};
</script>

<style lang="scss" scoped>
.AllocationRecord-conatiner {
	height: 100vh;
	padding: 24rpx;
	background-color: #f9f9f9;

	.AllocationRecord-list {
		height: calc(100vh - 88rpx - 48rpx);
		padding-top: 24rpx;
		
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.card {
			min-height: 262rpx;
			padding: 32rpx 24rpx;
			margin-bottom: 24rpx;
			border-radius: 24rpx;
			background-color: #fff;
			margin-bottom: 24rpx;

			.card-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				color: #333;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #f0f0f0;

				.goIcon {
					width: 10rpx;
					height: 16rpx;
				}
			}

			.card-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				margin-top: 24rpx;

				.info-label {
					color: #999;
				}

				.info-value {
					color: #333;
				}
			}
		}
	}
}
</style>
